import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import EapParamsForm from './hdForms/EapParamsForm';
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ produce, es }) => ({ produce, es }))
@Form.create()
class EapSocket extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    userId:"",
  };

  callback = key => {
    if (key == 1) {
      const { dispatch } = this.props;
      dispatch({
        type: 'es/getEapParams',
      });
    }
  };

  // 关闭远程讯息提示框
  closeCimMessageModel = () => {
    const {dispatch} = this.props;
    dispatch({
      type:"es/closeCimMessageModel"
    });
  }

  // 清空前端要显示的消息
  clearMsgShow = () => {
    const {dispatch} = this.props;
    dispatch({
      type:'es/clearMsgshow',
    });
  }

  connectEap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/connectEap',
    });
  };

  disConnectEap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "es/disconnectEap"
    });
  };

  updateUserId = () => {
    const {dispatch} = this.props;
    const {userId} = this.state;
    dispatch({
      type:"es/updateUserId",
      payload:userId,
    });
  };

  user_login = () => {
    const {dispatch} = this.props;
    dispatch({
      type:"es/userLogin",
    });
  };

  user_logout = () => {
    const {dispatch} = this.props;
    dispatch({
      type:"es/userLogout",
    });
  };

  keepCimMessage = () =>{
    const {dispatch} = this.props;
    const {cimMessageNumber,cimMessageInfo} = this.state;
    dispatch({
      type:"es/keepCimMessage",
      payload:[cimMessageNumber,cimMessageInfo],
    });
  };

  closeLoginHintModal = () => {
    const {dispatch} = this.props;
    dispatch({
      type:"hd/closeLoginHintModal",
    });
  };

  render() {
    const Panel = Collapse.Panel
    const {serverEapParams,eapConnect, eapMsg,cimMessageVisible,cimMessage,userIdserver,userLogin,loginHintVisible,loginHint} = this.props.es;
    const gridStyle1 = {
      width: '35%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '65%',
      textAlign: 'left',
    };

    const timeitem = []
    for (let i = 0; i < eapMsg.length; i++) {
      let head = eapMsg[i][0]
      let info = eapMsg[i][1]
      let colorUsed;
      if (head.includes("从EAP接收到消息")) {
        colorUsed = "red";
      } else {
        colorUsed = "green";
      }
      timeitem.push(
        <Timeline.Item color={colorUsed} key={head}>
          <p>{head}</p>
          <p>{info[0]}</p>
          <p>{info[1]}</p>
          <p>{info[2]}</p>
        </Timeline.Item>
      )
    }

    return (

      <>
        <Card title="EAP连接状态" style={{ marginLeft: 256 }} 
          extra = {
            <>
            <span style={{marginRight:10}}>远程讯息编号:</span>
            <Input style={{width:100,marginRight:10}} onChange={e => this.setState({ cimMessageNumber: e.target.value })} />
            <span style={{marginRight:10}}>远程讯息对应的内容:</span>
            <Input style={{width:100,marginRight:10}} onChange={e => this.setState({ cimMessageInfo: e.target.value })} />
            <Button style = {{marginRight:10}} onClick={this.keepCimMessage} >保存远程讯息</Button>
            </>
          }
        >
          <Card.Grid style={gridStyle1}>
            状态： {eapConnect ? <font style={{ color: '#00FF00', fontSize: 18 }}>已连接</font> :
              <font style={{ color: '#FF0000', fontSize: 18 }}>已断开</font>}{' '}

            <Button onClick={this.connectEap} style={{ marginLeft: 50 }}>连接EAP</Button>
            <Button onClick={this.disConnectEap} style={{ marginLeft: 30 }}>关闭EAP连接</Button>
          </Card.Grid>
          <Card.Grid style={gridStyle2}>
            当前员工id: &nbsp;&nbsp; <span> {userIdserver} </span>
             <Input disabled = {userLogin}   onChange={e => this.setState({ userId: e.target.value })}
              style={{ width: 100,marginLeft:10 }}/>
              <Button style={{marginLeft:10,marginRight:15}} onClick={this.updateUserId}>更新员工ID</Button>
            员工上下岗状态： {userLogin ? <font style={{ color: '#00FF00', fontSize: 18 }}>上岗中</font> :
              <font style={{ color: '#FF0000', fontSize: 18 }}>下岗中</font>}{' '}

    <Button onClick={this.user_login} style={{ marginLeft: 10 }}>上岗</Button>
            <Button onClick={this.user_logout} style={{ marginLeft: 30 }}>下岗</Button>
          </Card.Grid>
        </Card>
        <Collapse onChange={this.callback} style={{ marginLeft: 256 }}>
          <Panel header="EAP通信参数设置" key="1">
            <EapParamsForm serverThresData={serverEapParams} />
          </Panel>
        </Collapse>
        <Card key="123" title={<font style={{ color: '#2222FF', fontSize: 18 }}>设备和EAP通信消息显示</font>}
              style={{ marginLeft: 256 }} 
              extra = {
                <>
                  <Button style={{marginRight:100}} onClick = {this.clearMsgShow}>清空消息</Button>
                </>
              }>
          <Timeline>
            {timeitem}
          </Timeline>

        </Card>
      
        <Modal
          title={'EAP远程讯息提示框'}
          visible={cimMessageVisible}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeCimMessageModel}>
              关闭远程讯息提示框
            </Button>,
          ]}
        >
          <p>{cimMessage}</p>
        </Modal>

        <Modal
          title={'员工上下岗信息提示框'}
          visible={loginHintVisible}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeLoginHintModal}>
              关闭员工上下岗信息提示框
            </Button>,
          ]}
        >
          <p>{loginHint}</p>
        </Modal>
        
      </>
    );
  }
}
export default EapSocket;
